<template>
  <div id="musician">
    <!-- 返回顶部 -->
    <el-backtop :bottom="100"></el-backtop>

    <!-- 页面视图的第一块: 入住导航，各大视图导航-->
    <div id="msc1">
      <div class="msc1-c1">

        <!-- 入住导航 -->
        <div class="msc1-box" v-for="item of 3" :key="item">
          <p>音乐人</p>
          <p>我是原创歌手 <br/> 我要发行歌曲</p>
          <div>
            <el-button size="small" round @click="settleIn">立即入驻</el-button>
          </div>
        </div>
      </div>

      <!-- 各大视图导航 -->
      <div class="msc1-c2">
        <a :href="item.id" v-for="(item, i) of views" :key="i">{{ item.title }}</a>
      </div>
    </div>

    <!-- 页面视图的第二块: 音乐人数据-->
    <div id="msc2">
      <div class="msc2-c1">
        <div class="msc2-box" v-for="item of 3" :key="item">
          <p><span class="number">17</span>万+</p>
          <p>已入住音乐人</p>
        </div>
      </div>
    </div>

    <!-- 页面视图的第三块: 宝藏功能-->
    <div id="msc3">
      <div class="msc3-c1">
        <div class="msc3-box">
          <h1 class="text-center">宝藏功能</h1>

          <!-- 标签页-->
          <el-tabs tab-position="right" style="height: 200px;">
            <el-tab-pane :label="item.title" v-for="(item, i) of musician" :key="i">
              <el-image :src="item.img" style="width: 200px; height: 200px" fit="fill"></el-image>
              <div>
                <p class="title">{{ item.title }}</p>
                <p>{{ item.info }}</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 页面视图的第四块: 音乐人计划-->
    <div id="msc4">
      <div class="msc4-box">
        <h1 class="text-center">音乐人计划</h1>

        <!-- 轮播图-->
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(item, i) in lunbo" :key="i">
            <el-image :src="item" style="width: 600px; height: 400px" fit="fill"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 页面视图的第五块: 音乐人用户-->
    <div id="msc5">
      <div class="msc5-box">
        <h1 class="text-center">微享音乐欢迎你</h1>

        <div class="user-box">
          <div class="user" v-for="item of 12" :key="item">
            <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                      style="width: 150px; height: 150px" fit="fill"></el-image>

            <a href="#" class="text-center">
              <p>粉丝： 110万 <br/> 作品：110首 </p>
            </a>

            <p class="user-name text-center text-hidden">微享乐队</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>你尚未登录，是否现在去登录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <router-link class="clbg" to="/login" tag="el-button" @click="dialogVisible = false">确 定</router-link>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 导入 轮播图片
import lunbo_1 from '../public/img/音乐人/lunbo_1.jpeg';
import lunbo_2 from '../public/img/音乐人/lunbo_2.jpeg';
import lunbo_3 from '../public/img/音乐人/lunbo_3.jpg';

// 导入 音乐人计划 板块的图片
import msc_1 from '../public/img/音乐人/img_1.jpeg';
import msc_2 from '../public/img/音乐人/img_2.jpg';
import msc_3 from '../public/img/音乐人/img_3.jpg';
import msc_4 from '../public/img/音乐人/img_4.jpeg';
import msc_5 from '../public/img/音乐人/img_5.jpeg';


export default {
  name: "Musician",
  data () {
    return {
      // 页面视图的标题及 元素id
      views: [
        {title: '音乐人数据', id: '#msc2'},
        {title: '宝藏功能', id: '#msc3'},
        {title: '音乐人计划', id: '#msc4'},
        {title: '音乐人用户', id: '#msc5'}
      ],

      // 轮播图片
      lunbo: [lunbo_1, lunbo_2, lunbo_3],

      // 音乐人 板块信息
      musician:[
        {
          img: msc_1,  // 图片
          title: '快速入库五大平台',  // 标题
          info: '音乐人在微享音乐人开放平台成功上传歌曲后，将自动同步至五大平台。一站式入库享全网曝光，让歌曲被更多的用户听见。'  // 简介
        },
        {
          img: msc_2,
          title: '微享体系自主推广',
          info: '微享平台有专属的虚拟货币，可以用户兑换流量，作品曝光自己说了算。'
        },
        {
          img: msc_3,
          title: '音乐人社区',
          info: '玩音乐致初心，专业的音乐交流阵地在微享，您可以在这里找到音乐同好，碰撞音乐火花！'
        },
        {
          img: msc_4,
          title: '可视化数据管理',
          info: '音乐人在后台可以查看作品数据及粉丝数据。播放量、收藏量、评论数、下载量，粉丝画像等均以可视化形式呈现，' +
                '还有周报记录，帮助音乐人记录每一次成长。'
        },
        {
          img: msc_5,
          title: '翻唱中心',
          info: '音乐人可以在后台查看独家热门歌曲推荐，热歌列表每日更新，为音乐人提供热歌翻唱指引。'
        }
      ],

      dialogVisible: false,
    }
  },
  methods: {
    // 入驻
    settleIn () {
      if(this.$store.state.isLogin) {
        this.$message({
          showClose: true,
          message: '该功能失去联系了~',
          type: 'info',
          center: true
        });
      } else {
        this.dialogVisible = true;
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../public/less/musician";
</style>